<template>
	<view class="mine">
		<u-navbar :bgColor="bgColor" title="个人中心" :titleStyle="titleStyle" :leftIconColor="bgColor"></u-navbar>
		<view class="minetopBox">
			<image class="" src="http://youcaius.top/uploads/image/homebg.png" style="width: 750rpx; height: 536rpx;">
			</image>
			<view v-if="showFlag" class="mineinformation">
				<view class="informationBox">
					<button v-if="mineData.avatar != null" class="loginBtn" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar">
						<image class="" :src="avatar" style="width: 160rpx; height: 160rpx;border-radius: 160rpx;">
						</image>
					</button>

					<button v-else class="loginBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image
							src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
							style="width: 160rpx; height: 160rpx;border-radius: 160rpx;"></image>
					</button>

					<view v-if="mineData.name" class="nikeName">
						{{nickname}}
					</view>
					<view v-else class="nikeName">
						<input type="nickname" v-model="nickname" class="weui-input" placeholder="编辑昵称"
							@blur='getInputValue' />
					</view>

					<view class="monbile" style="display: flex;align-items: center;color: #ffffff;">
						{{mobile}}
						<!-- <view class="" style="color: #ffffff;">
							<text v-if="moblieflag">{{mobile ? mobile :"请输入手机号"}}</text>
							<input v-else type="text" v-model="mobile" placeholder="请输入手机号" />
						</view>
						<u-icon v-if="moblieflag" name="edit-pen-fill" color="#ffffff" size="28"
							@click="moblieflag = !moblieflag"></u-icon>
						<u-icon v-else name="share-square" color="#ffffff" size="28" @click="handleSavemobile"></u-icon> -->
					</view>

					<view v-if="mineData.level_day>0" class="viptext" style="position: relative;">
						<image src="../../static/image/vipbg1.png" mode="" style="width: 200rpx;height: 60rpx;"></image>
						<view class="" style="position: absolute;top: 25rpx;right: 45rpx;">
							{{mineData.level_day}}
						</view>
					</view>
				</view>
			</view>

			<!-- @click="handleLogin" -->

			<view v-else class="mineinformation" style="text-align: center;padding-top: 50rpx;box-sizing: border-box;">
				<button v-if="getnumber == '1'" class="box_phone_yes" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">
					<image
						src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
						style="width: 160rpx; height: 160rpx;border-radius: 160rpx;"></image>

					<view class="" style="color: #ffffff;">
						点击登录
					</view>
				</button>

				<view v-else class="" @click="handleLogin">
					<image
						src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
						style="width: 160rpx; height: 160rpx;border-radius: 160rpx;"></image>

					<view class="" style="color: #ffffff;">
						点击登录
					</view>
				</view>

			</view>

		</view>


		<view class="contentBox">
			<view class="contenitem" @click="handleGoMember">
				<view class="contentleft">
					<u-icon name="rmb-circle" color="#F8AD22" size="20"></u-icon>
					<view class="">
						购买会员
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>
			<view class="contenitem" @click="handlegotoRecord">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/kanfangjilu.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						看房记录
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>

			<view class="contenitem" @click="handlegotoFavoriteslist">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/shoucangliebiao.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						收藏列表
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>

			<view class="contenitem" @click="handlezufang">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/woyaozufang.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						我要租房
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>

			<view class="contenitem" @click="handlePhone">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/lianxikefu.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						联系客服
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>

			<view class="contenitem" @click="handleCooperation">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/woyaohezuo.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						我要合作
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>
			<view class="contenitem" @click="hanleservice">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/fuwuxieyi.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						服务协议
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>
			<view v-if="showFlag" class="contenitem" @click="handleExit">
				<view class="contentleft">
					<image class="" src="http://youcaius.top/uploads/image/tuichudenglu.png"
						style="width: 36rpx; height: 36rpx;">
					</image>
					<view class="">
						退出登录
					</view>
				</view>
				<view class="contentright">
					<image class="" src="http://youcaius.top/uploads/image/right.png"
						style="width: 40rpx; height: 40rpx;">
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		config,
		mineData,
		nameAvatat,
		login,
		obtainMobile
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "transparent",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				phonemoblie: "",
				avatar: "",
				mineData: {},
				nickname: "",
				moblieflag: true,
				mobile: "",
				showFlag: false,
				logincode: "",
				getnumber: null,
			}
		},
		onLoad() {
			if (uni.getStorageSync("token")) {
				this.getNavbarHeight()
				this.getMineData()
				this.showFlag = true
			} else {
				this.showFlag = false
			}
			// this.handleConfig()

		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getMineData()
				this.showFlag = true
			} else {
				this.showFlag = false
			}
			uni.removeStorageSync("loadTypt")
			// this.getConfig()
			this.handleConfig()
		},
		methods: {
			handleGoMember() {
				console.log("333333")
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								uni.reLaunch({
									url: "../login/index"
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "./membership"
					})
				}

			},
			async getInputValue(e) {
				let res = await nameAvatat({
					name: e.detail.value
				})
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "success",
						duration: 1000
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: "success",
						duration: 1000
					});
				}
				this.getMineData()
				console.log("name", this.nickname)
			},

			// 获取头像临时路径
			onChooseAvatar(e) {
				let that = this
				let avatatImg = e.detail.avatarUrl
				uni.uploadFile({
					url: 'https://youcaius.top/api/index/upload',
					filePath: avatatImg,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: async (uploadFileRes) => {

						// this.avatar = e.detail.avatarUrl
						// console.log("成功回调", JSON.parse(uploadFileRes));						
						console.log("成功回调", JSON.parse(uploadFileRes.data).data);
						that.avatar = JSON.parse(uploadFileRes.data).data

						let res = await nameAvatat({
							avatar: that.avatar
						})
						if (res.code == 1000) {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
						that.getMineData()

					}
				});
			},
			async handleSavemobile() {
				console.log("2222", this.mobile)
				let res = await nameAvatat({
					mobile: this.mobile
				})
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "success",
						duration: 1000
					});
					this.moblieflag = true
					this.getMineData()
				} else {
					uni.showToast({
						title: res.message,
						icon: "success",
						duration: 1000
					});
				}
			},
			async getMineData() {
				let res = await mineData()
				console.log("个人信息", res)
				this.mineData = res.data
				this.avatar = this.mineData.avatar
				this.nickname = this.mineData.name
				this.mobile = this.mineData.mobile
			},
			// async getConfig() {
			// 	let res = await config()
			// 	if (res.code == 1000) {
			// 		this.phonemoblie = res.data[0].value
			// 	}
			// },
			handlegotoRecord() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								// uni.reLaunch({
								// 	url: "../login/index"
								// })
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: "./records"
				})
			},
			handlegotoFavoriteslist() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							// if (res.confirm) {
							// 	uni.reLaunch({
							// 		url: "../login/index"
							// 	})
							// }
						}
					})
					return
				}
				uni.navigateTo({
					url: "./favoriteslist"
				})
			},
			hanleservice() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								// uni.reLaunch({
								// 	url: "../login/index"
								// })
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: "./serviceAgreement"
				})
			},
			handleCooperation() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								uni.reLaunch({
									url: "../login/index"
								})
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: "./cooperation"
				})
			},
			async handlePhone() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								uni.reLaunch({
									url: "../login/index"
								})
							}
						}
					})
					return
				}
				let res = await config()
				if (res.code == 1000) {
					this.phonemoblie = res.data[0].value
				}
				uni.makePhoneCall({
					phoneNumber: this.phonemoblie,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("取消")
					},
				});
			},
			async handlezufang(){
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								uni.reLaunch({
									url: "../login/index"
								})
							}
						}
					})
					return
				}
				let res = await config()
				if (res.code == 1000) {
					this.phonemoblie = res.data[8].value
				}
				uni.makePhoneCall({
					phoneNumber: this.phonemoblie,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("取消")
					},
				});
			},
			handleNlogin() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								uni.reLaunch({
									url: "../login/index"
								})
							}
						}
					})
				}
			},
			async handlehezuo() {
				if (!uni.getStorageSync("token")) {
					uni.showModal({
						// title: '提示',
						content: '请先登录后查看！',
						confirmColor: '#F8AD22',
						success: async function(res) {
							// console.log("是否选择", res)
							if (res.confirm) {
								uni.reLaunch({
									url: "../login/index"
								})
							}
						}
					})
					return
				}

				let res = await config()
				if (res.code == 1000) {
					this.phonemoblie = res.data[8].value
				}
				uni.makePhoneCall({
					phoneNumber: this.phonemoblie,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("取消")
					},
				});
			},
			handleExit() {
				let that = this
				uni.showModal({
					// title: '提示',
					content: '确定要退出登录吗？',
					confirmColor: '#F8AD22',
					success: async function(res) {
						// console.log("是否选择", res)
						if (res.confirm) {
							uni.removeStorageSync("token")
							uni.removeStorageSync("avatar")
							uni.reLaunch({
								url: "/pages/mine/index"
							})
						}
					}
				})
			},
			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},

			async handleConfig() {
				let res = await config()
				this.getnumber = res.data[10].value
				// console.log("是否手机号登录", res.data[10])
			},
			handleLogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						
						let res = await login({
							type: "2",
							code: that.logincode,
						})
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
							uni.reLaunch({
								url: "/pages/mine/index"
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
					}
				})
			},

			async getPhoneNumber(e) {
				console.log("44444444", e)
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let data = {
							code: that.logincode,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
						let res = await obtainMobile(data)
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
							uni.reLaunch({
								url: "/pages/mine/index"
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
					}
				})
				
				
				
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.box_phone_yes {
		background-color: transparent;
		border: none;
		width: 280rpx;
	}

	.box_phone_yes:after {
		border: none;
	}


	.viptext {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 600;
		color: #F8AD22;
		line-height: 28rpx;
		margin-left: 500rpx;
	}

	.loginBtn {
		background-color: transparent;
		border: none !important;
		outline: none !important;
	}

	.loginBtn::after {
		border: none;
	}

	.weui-input {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color: #FFFFFF;
	}

	.mine {
		.minetopBox {
			position: relative;

			.mineinformation {
				width: 100%;
				height: 406rpx;
				position: absolute;
				top: 150rpx;

				.informationBox {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 30rpx;

					.nikeName {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 38rpx;
						margin: 10rpx 0;
						display: flex;
						align-items: center;
					}

					.edit {
						width: 232rpx;
						height: 46rpx;
						background: rgba(255, 255, 255, 0.7);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FA7800;
						line-height: 46rpx;
						text-align: center;
					}
				}
			}
		}

		.contentBox {
			width: 100%;
			margin-top: -10rpx;
			z-index: 999;

			.contenitem {
				background-color: #ffffff;
				margin-bottom: 2rpx;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.contentleft {
					width: 170rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
				}

				.contentright {
					width: 40rpx;
				}
			}
		}

	}
</style>